<template>
	<div>
		 <!-- v-if="isAuth(['ROOT', 'USER:SELECT'])" -->
		 <el-form class="elForm" :inline="true" :model="dataForm" :rules="dataRule" ref="dataForm">
			<el-form-item>
				<el-button
					size="medium"
					class="add-btn"
					v-if="dataListSelections.length==0 && isAuth(['ROOT', 'HR'])"
					@click="addOrUpdateHandle()"
				>
					新增
				</el-button>
				<el-button
					size="medium"
					class="backBtn"
					v-if="dataListSelections.length!=0 && isAuth(['ROOT', 'HR'])"
					@click="ShowUpdateStatus()"
				>
					批量修改状态
				</el-button>
			</el-form-item>
			<el-form-item prop="name">
				<el-input
					v-model="dataForm.name"
					placeholder="姓名"
					size="medium"
					class="input"
					clearable="clearable"
				/>
				<el-button 
					class="search"
					size="small"
					@click="searchHandle()" 
					icon="el-icon-search" />
				<div class="super-search" :class="{'super-search-active': superSearchAnim}">
					<span 
						class="search-text" 
						@click="superSearchAnim = !superSearchAnim"
						style="cursor: pointer"
					>
						高级搜索
						<i class="el-icon-caret-bottom flip" :class="{'flip-active': superSearchAnim}"></i>
					</span>
					
				</div>
			</el-form-item>
		</el-form>
		<el-table
			:data="dataList"
			border
			v-loading="dataListLoading"
			@selection-change="selectionChangeHandle"
			cell-style="padding: 4px 0"
			style="width: 100%;"
			size="medium"
			ref="elTable"
			class="elTable">
			<el-table-column type="selection" header-align="center" align="center" width="50"/>
			<el-table-column prop="name" header-align="center" align="center" min-width="100" label="姓名" />
			<el-table-column prop="sex" header-align="center" align="center" min-width="60" label="性别" />
			<el-table-column prop="dept" header-align="center" align="center" min-width="120" label="部门" />
			<el-table-column
				prop="roles"
				header-align="center"
				align="center"
				min-width="150"
				label="角色"
				:show-overflow-tooltip="true"
			/>
			<el-table-column prop="tel" header-align="center" align="center" min-width="130" label="电话" />
			<el-table-column prop="status" header-align="center" align="center" min-width="100" label="员工状态" />
			<el-table-column prop="hiredate" header-align="center" align="center" min-width="130" label="入职日期" />
			<el-table-column header-align="center" align="center" width="80" label="操作">
				<template #default="scope">
					<el-dropdown>
						<span class="el-dropdown-link">
							<i class="el-icon-more cursor" style="font-size: 28px"></i>
						</span>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item @click="checkHandle(scope.row.id)">查看</el-dropdown-item>
							<el-dropdown-item 
								@click="addOrUpdateHandle(scope.row.id)" 
								v-if="isAuth(['ROOT', 'HR']) && scope.row.roles!='超级管理员'"
								>
								编辑
							</el-dropdown-item>
							<el-dropdown-item 
								@click="LeaveHandle(scope.row.id)" 
								v-if="isAuth(['ROOT', 'HR']) && scope.row.roles!='超级管理员'"
								>
								离职
							</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
			</template>
			</el-table-column>
		</el-table>
		<div class="super-search-con" v-show="superSearchAnim">
			<el-form 
				ref="superSearchForm" 
				:model="superSearchForm" 
				label-width="80px"
				label-position="top"
				class="super-search-form"
				>
				<el-form-item label="账号">
					<el-input v-model="superSearchForm.username" style="width: 220px" clearable placeholder="请输入"></el-input>
				</el-form-item>
				<el-form-item label="职位" prop="roles">
					<el-select
						v-model="superSearchForm.roles"
						clearable
						placeholder="请选择"
						style="width: 220px"
					>
						<el-option
							v-for="item in roleList"
							:key="item.id"
							:label="item.roleName"
							:value="item.roleName"
						>
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="部门" prop="dept">
					<el-select v-model="superSearchForm.dept" clearable placeholder="请选择" style="width: 220px">
						<el-option v-for="item in deptList" :key="item.id" :label="item.deptName" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="入职时间">
					<el-date-picker
						v-model="superSearchForm.hiredate1"
						type="date"
						clearable
						placeholder="开始时间"
						style="width: 160px"
					></el-date-picker> - 
					<el-date-picker
						v-model="superSearchForm.hiredate2"
						type="date"
						clearable
						placeholder="结束时间"
						style="width: 160px"
					></el-date-picker>
				</el-form-item>
				<el-form-item label="创建时间">
					<el-date-picker
						v-model="superSearchForm.createTime1"
						type="date"
						clearable
						placeholder="开始时间"
						style="width: 160px"
					></el-date-picker> - 
					<el-date-picker
						v-model="superSearchForm.createTime2"
						type="date"
						clearable
						placeholder="结束时间"
						style="width: 160px"
					></el-date-picker>
				</el-form-item>
				<el-form-item label="性别">
					<el-radio-group v-model="superSearchForm.sex">
						<el-radio label="不限"></el-radio>
						<el-radio label="男"></el-radio>
						<el-radio label="女"></el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="员工状态">
					<el-button class="btn-color add-btn" size="mini" @click="superSearchForm.status = ''" style="padding: 5px;margin-right: 10px">不限</el-button>
					<el-radio-group v-model="superSearchForm.status" style="display: inline-block">
						<el-radio label="初始"></el-radio>
						<el-radio label="在职(试用期)"></el-radio>
						<el-radio label="在职(已转正)"></el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<div class="super-search-foot">
				<el-button class="clearBtn" size="mini" @click="clearSuperSearchForm">清空</el-button>
				<el-button class="btn-color add-btn" size="mini" @click="superSearchHandle">查询</el-button>
			</div>
		</div>
		<div class="super-search-curtain" v-show="superSearchAnim" @click="superSearchAnim=!superSearchAnim"></div>
		
			<el-dialog v-model="updateStatusVisible" title="批量修改员工状态" width="45%" center>
				<div class="update-status">
					<el-radio-group v-model="updateStatus">
						<el-radio label="初始"></el-radio>
						<el-radio label="在职(试用期)"></el-radio>
						<el-radio label="在职(已转正)"></el-radio>
						<el-radio label="离职"></el-radio>
					</el-radio-group>
				</div>
				<template #footer>
					<span class="dialog-footer">
						<el-button class="clearBtn" @click="cancelUpdateStatus">取消</el-button>
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<el-button class="btn-color add-btn" @click="updateStatusHandle">确定</el-button>
					</span>
				</template>
			</el-dialog>
		
		<el-pagination
			@size-change="sizeChangeHandle"
			@current-change="currentChangeHandle"
			:current-page="pageIndex"
			:page-sizes="[10, 20, 50]"
			:page-size="pageSize"
			:total="totalCount"
			layout="total, sizes, prev, pager, next, jumper"
		></el-pagination>
	</div>
</template>

<script>
export default {
	data() {
		return {
			dataForm: {
				name: '',
			},
			superSearchForm: {
				username: '',
				roles: '',
				dept: '',
        hiredate1: '',
				hiredate2: '',
				createTime1: '',
				createTime2: '',
				sex: '不限',
				status: '',
			},
			dataList: [],
			roleList: [],
      deptList: [],
			pageIndex: 1,
			pageSize: 10,
			totalCount: 0,
			updateStatus: '',
			updateStatusVisible: false, // 显示修改员工状态的窗口
			superSearchAnim: false, // 高级搜索的显示隐藏和动画
			superSearchInfo: [],
			dataListLoading: false,
			dataListSelections: [],
			addOrUpdateVisible: false,
			dimissVisible: false,
			// dataRule: {
			// 	name: [{ required: false, pattern: '^[\u4e00-\u9fa5]{1,10}$', message: '姓名格式错误' }]
			// }
		};
	},
	methods: {
		// 显示修改员工状态的窗口
		ShowUpdateStatus() {
			this.updateStatusVisible = true
		},
		// 批量修员工状态
		updateStatusHandle() {
			let ids = this.dataListSelections.map(item => item.id)
			console.log(ids, this.updateStatus);
			let data = {
				ids,
				status: this.updateStatus
			}
			this.$http('user/updateStatusByIds', 'post', data, false, resp => {
				if (resp.code == 200) {
					this.loadDataList()
				}
			})
			this.cancelUpdateStatus()
		},
		cancelUpdateStatus() {
			this.updateStatusVisible = false
			this.updateStatus = ''
		},
		// 员工离职
		LeaveHandle(id) {
			this.$confirm("确定要离职选中的员工？", "提示", {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() =>{
				this.$http('user/leave', 'post', {id}, true, (resp) => {
					if(resp.rows > 0) {
						this.$message({
							message: '操作成功',
							type: 'success',
							duration: 1200
						})
						this.loadDataList()
					} else {
						this.$message({
							message: '操作失败',
							type: 'error',
							duration: 1200
						})
					}
				})
			})
				
		},
		// 查询功能
		searchHandle() {
			// 先执行表单验证
			this.$refs['dataForm'].validate(valid => {
				// console.log(valid)
				if (valid) {
					// 清理页面上的表单验证结果
					this.$refs['dataForm'].clearValidate()
					// 不允许上传空字符串给后端，但是可以传null
					if (this.dataForm.name == '') {
						this.dataForm.name = null
					}
					// 如果当前不是第一页，查询后跳转到第一页
					if (this.pageIndex != 1) {
						this.pageIndex = 1
					}
					this.loadDataList()
				} else {
					return false
				}
			})
		},
		// 发送高级查询
		superSearchHandle() {
			console.log(this.superSearchForm);
			// if (this.superSearchForm.status == '初始') {
			// 	this.superSearchForm.status = 1
			// } else if (this.superSearchForm.status == '在职(试用期)') {
			// 	this.superSearchForm.status = 2
			// } else if (this.superSearchForm.status == '在职(已转正)') {
			// 	this.superSearchForm.status = 3
			// } else if (this.superSearchForm.status == '离职') {
			// 	this.superSearchForm.status = 4
			// }
				// 先执行表单验证
			this.$refs['superSearchForm'].validate(valid => {
				// console.log(valid)
				if (valid) {
					// 清理页面上的表单验证结果
					this.$refs['superSearchForm'].clearValidate()
					// 不允许上传空字符串给后端，但是可以传null
					if (this.superSearchForm.username == '') {
						this.superSearchForm.username = null
					}
					if (this.superSearchForm.dept == '') {
						this.superSearchForm.dept = null
					}
					if (this.superSearchForm.sex == '不限') {
						this.superSearchForm.sex = null
					}
					// 如果当前不是第一页，查询后跳转到第一页
					if (this.pageIndex != 1) {
						this.pageIndex = 1
					}
					this.loadDataList()
					// this.clearSuperSearchForm()
					this.superSearchAnim = !this.superSearchAnim
				} else {
					return false
				}
			})
		},
		// 清空高级搜索
		clearSuperSearchForm() {
			this.superSearchForm = {
				name: '',
				roles: '',
				dept: '',
        hiredate1: '',
				hiredate2: '',
				createTime1: '',
				createTime2: '',
				sex: '不限',
				status: '',
			}
		},
		addOrUpdateHandle(id) {
			if (id) {
				this.$router.push({name: 'UserUpdate', params: {id: id}})
			} else {
				this.$router.push({name: 'UserAdd'})
			}
		},
		// 加载分页数据
		loadDataList() {
			this.dataListLoading = true
			let data = {
				page: this.pageIndex,
				length: this.pageSize,
				name: this.dataForm.name
			}
			if (this.superSearchForm.sex == '不限') {
				this.superSearchForm.sex = null
			}
			let superSearchForm1 = this.superSearchForm
			if (superSearchForm1) {
				data = {...data, ...superSearchForm1}
			}
			// console.log(data);
			
			this.$http('user/searchUserByPage', 'post', data, true, (resp) => {
				let page = resp.page
				let list = page.list
				console.log(list)
				list.forEach((item) => {
					if(item.status == 1) {
						item.status = "初始"
					} else if (item.status == 2) {
						item.status = '在职(试用期)'
					} else if (item.status == 3) {
						item.status = '在职(已转正)'
					} else if (item.status == 4) {
						item.status = '离职'
					}
					item.hiredate = item.hiredate.replace("T", " ")
				})
				if (this.superSearchForm.sex == null) {
					this.superSearchForm.sex = '不限'
				}
				this.dataList = list
				this.totalCount = page.totalCount
				this.dataListLoading = false
			})
		},
		// 查看用户页面
		checkHandle(id1) {
			let id = id1 ? id1 : null
			this.$router.push({name: 'UserCheck', params: {id}})
		},
		// 获取部门
    getDeptList() {
      this.$http('dept/searchAllDept', 'get', null, true, resp => {
        if (resp.code == 200) {
          this.deptList = resp.list
          // console.log(this.deptList);
        }
      })
    },
    // 获取角色
    getRoleList() {
      this.$http('role/searchAllRole', 'get', null, true, resp => {
        if (resp.code == 200) {
          this.roleList = resp.list
        }
      })
    },
		// 设置每页显示记录数，并显示第一页
		sizeChangeHandle(val) {
			this.pageSize = val
			this.pageIndex = 1
			this.loadDataList()
		},
		// 跳转到第几页
		currentChangeHandle(val) {
			this.pageIndex = val
			this.loadDataList()
		},
		selectionChangeHandle: function(val) {
			this.dataListSelections = val;
		}
	},
	created() {
		this.loadDataList()
		this.getDeptList()
		this.getRoleList()
	}
};
</script>

<style lang="scss" scoped="scoped">
@import './user.scss';
</style>
